<template>
	<view class="notice-page">
		<u-icon name="volume-fill" size="36" color="#fff"></u-icon>
		<view class="notice">
			<swiper class="notice_swiper" vertical easing-function="easeInOutCubic" circular autoplay :interval="interval">
				<swiper-item v-for="(item,index) in noticeList" :key="index" class="sw_item" @click="clickNotice(item)">
					<text class="sw_text">{{publicJS.jsonEn(item.title)}}</text>
				</swiper-item>
			</swiper>
		</view>
		<u-icon class="sw_image" name="arrow-right" color="#35E8F7" @click='clickNoticeList'></u-icon>
	</view>

</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			noticeList: {
				type: Array,
				default () {
					return []
				}
			},
			interval: {
				type: Number,
				default: 5000
			}
		},
		methods: {
			clickNotice(e) {
				this.$emit('clickNotice', e)
			},
			clickNoticeList() {
				this.$emit('clickNoticeList')
			}
		}
	};
</script>
<style lang="scss" scoped>
	.notice-page {
		display: flex;
		height: 100%;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;

		.notice {
			width: calc(100% - 100rpx);
			height: 100%;
			color: #fff;
			font-size: 28rpx;

			.notice_swiper {
				width: 100%;
				height: 100%;

				.sw_item {
					display: flex;
					align-items: center;
					width: 100%;

					.sw_text {
						width: 100%;

						/deep/  span {
							display: block;
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}
</style>